<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航</title>
  <style type="text/css">
*{margin:0;padding:0;list-style:none;font-size: 10pt;color:#333;}
a{text-decoration: none;}
.fl{float: left;}.fr{float: right;}

.topmenu{display: block;width: 220px;border:solid 2px #e4393c;z-index:0;}
.toptitle{height: 40px;line-height: 40px;text-align: left;font-size: 11pt;font-weight: bold;color:#fff;background: #e4393c;padding-left: 20px;}
.topmenu li{height: 30px;line-height: 30px;text-align: left;font-size: 11pt;padding-left: 8px;
 background: url(http://img.mukewang.com/5411027300014f0200220030.jpg) #f8f8f8 no-repeat right center;}

 .topmenu .lihover{height:60px;background:#fff;border:solid 1px #ddd;border-right: 0;box-shadow: 0 0 8px #ddd;}
.topmenu .lihover .submeun{display: block;}
.topmenu .lihover .bsfk{display: inline-block;float: right;width: 20px;height:60px;background:#fff;z-index:10;position: relative;right:0;}

.topmenu li a:hover{text-decoration: underline;color:#e4393c;font-weight: bold;}
.topmenu li b{display:none;font-weight:normal;font-size: 10pt;}
.topmenu .lihover b{display: block;height: 30px;line-height: 30px;}
.submeun{display:none;width: 715px;position: absolute;left:220px;top:40px;background:#fff;border:solid 1px #ddd;border-right: 0;box-shadow: 0 0 8px #ddd;z-index:5;}
.submeun .fl{width:490px;margin:5px;}
.submeun .fl dl{overflow: hidden;border-bottom: solid 1px #eee;margin:1em 0;padding-bottom: 6px;}
.submeun .fl dt{float: left;width: 60px;height: 22px;line-height: 22px;text-align: right;padding-right: 6px;}
.submeun .fl dt a{text-decoration: underline;color:#e4393c;font-weight: bold;font-size: 10pt;}
.submeun .fl dd{overflow: hidden;}
.submeun .fl dd a{display: inline-block;float: left;border-left: 1px solid #ccc;color:#737373;font-size: 9pt;padding:0 8px;height: 14px;line-height: 14px;margin:4px 0;}
.submeun .fr{width: 200px;margin:5px;}
  </style>
</head>
<body>
<ul class="topmenu" id="topmenu">
	<div class="toptitle">全部商品分类</div>
	<li><a href="#">图书音像、数字商品</a><span class="bsfk"></span>
		<div class="submeun">
			<div class="fl">
				<dl>
					<dt><a href="">电子书</a></dt>
					<dd><a href="">免费</a><a href="">小说</a><a href="">励志与成功</a><a href="">婚恋/两性</a><a href="">文学</a><a href="">经管</a><a href="">畅读VIP</a></dd>
				</dl>
				<dl>
                        <dt><a href="#">数字音乐</a></dt>
                        <dd>
                            <a href="#">通俗流行</a> <a href="#">古典音乐</a> <a href="#">摇滚说唱</a> <a href="#">爵士蓝调</a>
                            <a href="#">乡村民谣</a> <a href="#">有声读物</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">音像</a></dt>
                        <dd>
                            <a href="#">音乐</a> <a href="#">影视</a> <a href="#">教育音像</a> <a href="#">游戏</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">文艺</a></dt>
                        <dd>
                            <a href="#">小说</a> <a href="#">文学</a> <a href="#">青春文学</a> <a href="#">传记</a> <a
                                href="#">艺术</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">人文社科</a></dt>
                        <dd>
                            <a href="#">历史</a> <a href="#">心理学</a> <a href="#">政治/军事</a> <a href="#">国学/古籍</a>
                            <a href="#">哲学/宗教</a> <a href="#">社会科学</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">经管励志</a></dt>
                        <dd>
                            <a href="#">经济</a> <a href="#">金融与投资</a> <a href="#">管理</a> <a href="#">励志与成功</a>
                        </dd>
                    </dl>
                    <dl class="fore7">
                        <dt><a href="#">生活</a></dt>
                        <dd>
                            <a href="#">家教与育儿</a> <a href="#">旅游/地图</a> <a href="#">烹饪/美食</a> <a href="#">时尚/美妆</a>
                            <a href="#">家居</a> <a href="#">婚恋与两性</a> <a href="#">娱乐/休闲</a> <a href="#">健身与保健</a>
                            <a href="#">动漫/幽默</a> <a href="#">体育/运动</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">科技</a></dt>
                        <dd>
                            <a href="#">科普</a> <a href="#">IT</a> <a href="#">建筑</a> <a href="#">医学</a> <a href="#">
                                工业技术</a> <a href="#">电子/通信</a> <a href="#">农林</a> <a href="#">科学与自然</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">少儿</a></dt>
                        <dd>
                            <a href="#">少儿</a> <a href="#">0-2岁</a> <a href="#">3-6岁</a> <a href="#">7-10岁</a>
                            <a href="#">11-14岁</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">教育</a></dt>
                        <dd>
                            <a href="#">教材</a> <a href="#">中小学教辅</a> <a href="#">考试</a> <a href="#">外语学习</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">其它</a></dt>
                        <dd>
                            <a href="#">英文原版书</a> <a href="#">港台图书</a> <a href="#">工具书</a> <a href="#">套装书</a>
                            <a href="#">杂志/期刊</a>
                        </dd>
                    </dl>
			</div>
			<div class="fr">右侧推荐品牌</div>
		</div>
	</li>
	<li><a href="#">家用电器</a></li>
	<li><a href="#">手机数码</a></li>
	<li><a href="#">电脑办公</a></li>
	<li><a href="#">家居、家具、家装、厨具</a></li>
	<li><a href="#">服饰内衣</a></li>
	<li><a href="#">珠宝首饰</a></li>
	<li><a href="#">个护化妆</a></li>
	<li><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>
	<li><a href="#">运动户外</a></li>
	<li><a href="#">汽车用品</a></li>
	<li><a href="#">母婴、玩具、乐器</a>
    <b><a href="">文学</a><a href="">经管</a><a href="">畅读VIP</a></b>
    </li>
	<li><a href="#">食品饮料、酒类、生鲜</a><span class="bsfk"></span>
        <div class="submeun">
            <div class="fl">
                <dl>
                    <dt><a href="">电子书</a></dt>
                    <dd><a href="">免费</a><a href="">小说</a><a href="">励志与成功</a><a href="">婚恋/两性</a><a href="">文学</a><a href="">经管</a><a href="">畅读VIP</a></dd>
                </dl>
                <dl>
                        <dt><a href="#">数字音乐</a></dt>
                        <dd>
                            <a href="#">通俗流行</a> <a href="#">古典音乐</a> <a href="#">摇滚说唱</a> <a href="#">爵士蓝调</a>
                            <a href="#">乡村民谣</a> <a href="#">有声读物</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">音像</a></dt>
                        <dd>
                            <a href="#">音乐</a> <a href="#">影视</a> <a href="#">教育音像</a> <a href="#">游戏</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">文艺</a></dt>
                        <dd>
                            <a href="#">小说</a> <a href="#">文学</a> <a href="#">青春文学</a> <a href="#">传记</a> <a
                                href="#">艺术</a>
                        </dd>
                    </dl>
            </div>
            <div class="fr">右侧推荐品牌</div>
        </div>
    </li>
	<li><a href="#">营养保健</a></li>
</ul>

<script type="text/javascript">
window.onload= function() {
	var topmenu = document.getElementById('topmenu');
	var Lis = topmenu.getElementsByTagName('li');
	for (var i = 0; i < Lis.length; i++) {
        Lis[i].i=i;
		Lis[i].onmouseover = function(){
			this.className = "lihover";

			var h0=(this.i-1)*30+42;
			var y=this.getElementsByTagName('div')[0].offsetHeight;
			var h=this.getElementsByTagName('div')[0].style.top+y;
			if (h<h0) {
				this.getElementsByTagName('div')[0].style.top = h0+"px";
			}
            if(y<550){
                this.getElementsByTagName('div').style.top = "3px";
            }
		}
		Lis[i].onmouseout = function(){
			this.className = "";
		}
	};
}
 </script>
</body>
</html>
